<template>
	<scroll-view scroll-y="true" >
		<view class="page">
			<view class="top">
				<image class="back" @click="back" src="/static/image/publish/back.png" mode=""></image>
				<image class="bg" src="/static/image/publish/addressposter.png" mode=""></image>
			</view>
			<view class="content">
				<text class="btn" @click="orderTicket">
					预约订票
				</text>
				<view class="header">
					<text class="left">福建博物馆</text>
					<view class="right">
						<image class="a" src="/static/image/publish/like.png" mode=""></image>
						<image class="b" src="/static/image/publish/collect.png" mode=""></image>
					</view>
				</view>
				<view class="tags">
					<text>去哪儿 No.1</text>
				</view>
				<div  class="tips">
					<text>建议游玩＞3小时</text>
				</div>
				<text class="guanfang">官网：https://www.fzsbw</text>
				<view class="address">
					<text class="left">福建省福州市鼓楼区湖头街96号</text>
					<view class="right">
						<view class="box">
							<image src="/static/image/publish/map.png" mode=""></image>
							<text>地图</text>
						</view>
						<view class="box" @click="openTel">
							<image src="/static/image/publish/phone.png" mode=""></image>
							<text>电话</text>
						</view>
					</view>
				</view>
				<view class="tabs">
					<view class="item" :class="type == 1 ? 'active' : ''" @click="handle(1)">
						<image v-if="type == 1" src="/static/image/publish/intruce.png" mode=""></image>
						<text>简介</text>
					</view>
					<view class="item" :class="type == 2 ? 'active' : ''" @click="handle(2)">
						<image v-if="type == 2" src="/static/image/publish/comment.png" mode=""></image>
						<text>评论</text>
					</view>
					<view class="item" :class="type == 3 ? 'active' : ''" @click="handle(3)">
						<image v-if="type == 3" src="/static/image/publish/video.png" mode=""></image>
						<text>视频</text>
					</view>
				</view>
				<view v-if="type == 1" class="desc">
					<text>福建博物院是福建省文化和旅游厅直属单位，位于福建省福州市鼓楼区湖头街96号，地处福州大梦山麓，西湖之畔。福建博物院是首批国家一级博物馆，2015年获最具创新力博物馆，是集主展馆、积翠园艺术馆、自然馆、福文化专题馆于一体的综合性博物馆。占地面积90亩，建筑面积3.7万平方米，展厅面积约1.2万平方米，共设有15个展厅。福建博物院前身1933年10月创立的“福建省立科学馆”，1949年8月更名“福建省人民科学馆”，1953年4月整合组建为“福建省博物馆”，1960年，福建省博物馆迁至现址，1970年改名毛泽东思想展览馆并迁出，1971年恢复福建省博物馆之名，1973年迁回现址。2000年3月，在原馆址上重建，2002年新馆落成，更名为福建博物院。拥有馆藏文物22万余件、自然标本1万余件，其中珍贵文物3万多件，以海丝文物、华人华侨文物、革命文物、红色文物、书画文物等为主要特色。 福建博物院作为2023年“5·18国际博物馆日”中国主会场，完成了活动开幕式、系列论坛等多项工作，策划展出了“福航天下——海上丝绸之路的文化印记”等4个主题展览，精心设计了系列配套活动。2019年，“纸上、网上、空中、空港、地铁博物馆——五馆服务工程”入选文化和旅游科技创新工程项目。每年接待的观众逾150万人次，成为福建省传播优秀传统文化、弘扬社会主义核心价值观、开展爱国主义教育、讲好中国故事、福建故事的重要阵地。</text>
				</view>
				<view v-if="type == 2" class="comment">
					<div class="total">
						<text >1000+评论</text>
					</div>
					
					<view class="item">
						<view class="comment-header">
							<image src="/static/image/travel/people.png" mode=""></image>
							<text>甄青妹</text>
						</view>
						<view class="comment-txt">
							<text>我是评论内容的占位符，我是评论内容的占位</text>
						</view>
						<text class="comment-time">16分钟前</text>
					</view>
					<view class="item">
						<view class="comment-header">
							<image src="/static/image/travel/people.png" mode=""></image>
							<text>路过的游客</text>
						</view>
						<view class="comment-txt">
							<text>品牌也远不是强调名称，标志，符号或者商标。它融合了一系列定义其形象的独特价值，并作为一份不成文的合同，通过在消费者每一次购买，使用，体验是提供始终如一的产品和服务。同时还在寻求与消费者的情感联系，确保终身关系</text>
						</view>
						<view class="comment-time">
							<text class="">16分钟前</text>
						</view>
						
					</view>
				</view>
				<view v-if="type == 3" class="video">
					
					<div v-for="(item, index) in list" :key="index" style="height: 388rpx;width: 100%;position: relative;margin-bottom: 18rpx;">
						<view class="" @click="stopFn(item.id,index)" style="width: 100%;height: 388rpx;">
							<MyVideo  style="width: 100%;height: 388rpx;" :item="item" 
							:isPlay="!item.isShow"
							 @onEnded="endVideo(item.id,index)" />
						</view>
						<view v-if="item.isShow"
							style="z-index:99;position: absolute;width:100%;height: 388rpx;top:0;left:0;display:flex; justify-content:center; align-items:center;">
							<image @click.stop="playsFn(item.id,index)" src="@/static/bofang.png"
								style="width: 40px;height: 40px;"></image>
						</view>
					</div>
					
					<!-- <video type="video/mp4" src="https://www.xiangzizhuye.cn/test.mp4">
						<cover-view style="width: 100%; height: 388rpx;background-color:#fff;"></cover-view>
					</video>
					<video type="video/mp4" src="https://www.xiangzizhuye.cn/test.mp4">
						<cover-view style="width: 80vw; height: 388rpx;background-color:#fff;"></cover-view>
					</video> -->
				</view>
				<view class="" style="height: 196rpx;">
					
				</view>
			</view>
		</view>
		<tabbar selected="2"></tabbar>
	</scroll-view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue";
	import MyVideo from '@/components/fuyu-MixSwiper/MyVideo.vue'
	export default {
		components: {
			tabbar: tabbar,
			MyVideo
		},
		data() {
			return {
				type: 1,
				list: [
					{
						id: 111,
						url: 'https://www.xiangzizhuye.cn/test.mp4',
						isShow: true
					},
					{
						id: 222,
						url: 'https://www.w3schools.com/html/mov_bbb.mp4',
						isShow: true
					},
				],
				currentId: '',
				currentIndex: 0,
			}
		},
		methods: {
			stopFn(id, index) {
				// uni.showToast({
				// 	title: '1111'
				// })
				this.currentId = id
				this.currentIndex = index
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.pause()
				this.list[index].isShow = true
			},
			playsFn(id, index) {
				console.log('this.currentIndex', this.currentIndex, this.currentId )
				
				if(this.currentId) {
					console.log('aaa', this.currentIndex)
					let target = uni.createVideoContext(`Video${this.currentId}`, this)
					if(target) {
						console.log('111')
					
						target.pause()
						this.list[this.currentIndex].isShow = true
					}
					this.list[this.currentIndex].isShow = true
					this.$set(this.list[this.currentIndex], 'isShow', true)
				}
				this.currentId = id
				this.currentIndex = index
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.play()
				console.log('222')
				this.list[index].isShow = false
				// this.videoId = id
				// this.videoIndex = index
				
				// this.autoplaySwiper = false
			},
			orderTicket() {
				uni.navigateTo({
					url: '/pages/orderTicket/orderTicket'
				})
			},
			handle(type) {
				this.type = type
			},
			back() {
				uni.navigateBack()
			},
			openTel() {
				uni.makePhoneCall({
				    phoneNumber: '17345567653',
				})
			}
		}
	}
</script>

<style lang="scss">
.page {
	background: #EEF0F4;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	.top {
		position: relative;
		.back {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			left: 16rpx;
			top: 106rpx;
			z-index: 2;
		}
		.bg {
			width: 100%;
			height: 480rpx;
		}
	}
	.content {
		margin-top: -40rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 30rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		.btn {
			position: absolute;
			right: 30rpx;
			top: 118rpx;
			width: 144rpx;
			height: 56rpx;
			background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
			border-radius: 28rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 22rpx;
			.left {
				font-weight: 500;
				font-size: 40rpx;
				color: #1A1A1A;
				line-height: 56rpx;
			}
			.right {
				display: flex;
				align-items: center;
				.a {
					width: 40rpx;
					height: 38rpx;
					margin-right: 20rpx;
				}
				.b {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.tags {
			margin-bottom: 24rpx;
			text {
				box-sizing: border-box;
				padding: 4rpx 10rpx;
				box-sizing: border-box;
				height: 40rpx;
				background: #FFEEDF;
				border-radius: 4rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #673114;
				line-height: 34rpx;
				margin-right: 20rpx;
			}
		}
		.tips {
			border-radius: 4rpx;
			margin-bottom: 20rpx;
			text {
				padding: 0 10rpx;
				height: 32rpx;
				border: 1rpx solid #B0C3DD;
				font-weight: 400;
				font-size: 24rpx;
				color: #0F4999;
				line-height: 32rpx;
			}
		}
		.guanfang {
			font-weight: bold;
			font-size: 24rpx;
			color: #1A1A1A;
			line-height: 34rpx;
			margin-bottom: 20rpx;
		}
		.address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34rpx;
			.left {
				font-weight: bold;
				font-size: 24rpx;
				color: #1A1A1A;
				line-height: 34rpx;
			}
			.right {
				display: flex;
				align-items: center;
				.box {
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #1A1A1A;
						line-height: 32rpx;
					}
				}
			}
		}
		.tabs {
			height: 92rpx;
			background: #F6F7F9;
			display: flex;
			.item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 32rpx;
					height: 32rpx;
				}
				text {
					margin-left: 6rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #1A1A1A;
					line-height: 42rpx;
				}
			}
			.active {
				background-color: white;
				text {
					font-weight: bold;
					font-size: 30rpx;
					color: #006FF6;
				}
			}
		}
		.desc {
			padding: 30rpx 32rpx;
			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
			}
		}
		.comment {
			padding: 30rpx 24rpx;
			display: flex;
			flex-direction: column;
			.total {
				
				margin-bottom: 30rpx;
				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #777777;
					line-height: 34rpx;
				}
			}
			.item {
				border-bottom: 2rpx solid #F3F5F7;
				margin-bottom: 30rpx;
				.comment-header {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					image {
						width: 72rpx;
						height: 72rpx;
						margin-right: 20rpx;
					}
					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #1A1A1A;
						line-height: 40rpx;
					}
				}
				.comment-txt {
					margin-bottom: 20rpx;
					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #1A1A1A;
						line-height: 40rpx;
					}
				}
				.comment-time {
					margin-bottom: 22rpx;
					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
					}
				}
			}
		}
		.video {
			padding: 30rpx;
			video {
				margin-bottom: 18rpx;
				width: 100%;
				height: 388rpx;
			}
		}
	}
}
</style>
